<template>
  <div class="state-item" style="cursor: pointer;" @contextmenu.prevent.stop="itemRightClick($event, 'jiangelianlu')">
    <div class="from-col">{{from}}</div>
    <div class="item-status" >
      <template v-if="state == 1">
        <svg>
          <line x1="10" y1="15" x2="90" y2="15" stroke="#bfed8e" stroke-width="4"></line>
          <polygon points="110,15 90,8 90, 21" fill="#bfed8e"></polygon>
        </svg>
      </template>
      <template v-else>
        <svg>
          <line x1="10" y1="15" x2="90" y2="15" stroke="#bfed8e" stroke-width="4"></line>
          <polygon points="110,15 90,8 90, 21" fill="#bfed8e"></polygon>
        </svg>
      </template>
    </div>
    <div class="to-col">{{to}}</div>
  </div>
</template>

<script>
export default {
  name: "JianGeLianLuZhuangTai",
  components: {
  },
  props: {
    from: {
      type: String,
    },
    state:{
      type: Number
    },
    to: {
      tye: String
    }
  },
  methods: {
		// 右击菜单
		itemRightClick(event, type) {
			// event.preventDefault(); // 阻止默认的右键菜单弹出
			// // 显示自定义右键菜单
			// const {clientX, clientY} = event
			// let params = {
			// 	clientX,
			// 	clientY,
			// 	type,
			// 	currentObj: {
			// 		name: this.from + ' --> ' + this.to,
			// 		state: this.state,
			// 		controlStatusList: [{value:0,label: '正常'},{value:1, label: '异常'}],
			// 	}
			// }
			// this.$emit('itemRightClick', params)
		},
  }
}
</script>

<style scoped lang="less">
.state-item {
  display: flex;
  text-align: center;
  align-items: center;
  & > div {
    flex: 0.9;
    flex-shrink: 0;
    font-size: 12px;
    &.from-col {
      flex: 1.2;
    }
    &.to-col {
      flex: 0.9;
    }
  }
  .item-status {
    width: 100%;
    svg {
      width: 100%;
      height: 24px;
    }
  }
}
</style>
